/** 折线图组件参数 { title // 折线图名称 value // 数值 } */
<template>
  <div :id="currentID"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
const currentID = computed(() => {
  return `echartsBox${Math.random()}`
})
const initEcharts = (val: any) => {
  const myChart = echarts.init(document.getElementById(currentID.value) as HTMLElement)
  const option = {
    grid: {
      top: 12,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '当前',
        '2小时',
        '4小时',
        '6小时',
        '8小时',
        '10小时',
        '12小时',
        '14小时',
        '16小时',
        '18小时',
        '20小时',
        '22小时',
        '24小时',
      ],
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
        },
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        //网格线
        show: false,
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
        },
      },
      formatter: function (value: any) {
        return value + '级'
      },
    },
    series: [
      {
        data: val,
        type: 'line',
        color: 'aqua',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0, 255, 255, 1)' },
            { offset: 0.2, color: 'rgba(0, 255, 255, 1)' },
            { offset: 1, color: 'rgba(0, 255, 255, 0)' },
          ]),
        },
      },
    ],
  }
  myChart.setOption(option)
}
defineExpose({
  initEcharts,
})
onMounted(() => {
  // initEcharts();
})
</script>
<style lang="less" scoped>
div {
  width: 100%;
  height: 100%;
}
</style>
